<template>
	<div class="view">
		<div class="list">
			<div @click="to('/pages/CommunityPages/details/main?id=' + item.publishId)" class="item"
				v-for="(item, index) in list" :key="index">
				<div class="Box">
					<image :src="item.avatar || '/static/images/default_avatar.png'" mode="aspectFill"></image>
					<div>
						<p>{{ item.nickName ? item.nickName : '' }}</p>
						<p>{{ item.createTime }}</p>
					</div>
				</div>
				<div class="text">{{ item.commentDetail }}</div>
				<div class="wrap">
					<div class="Box">
						<image :src="item.publishInfo.avatar || '/static/images/default_avatar.png'" mode="aspectFill"></image>
						<div>
							<p>{{ item.publishInfo.nickName }}</p>
							<p>{{ item.publishInfo.createTime }}</p>
						</div>
						<div class="solution" v-if="item.publishInfo.helpStatus == 1">已解决</div>
					</div>
					<div v-if="item.publishInfo.recourseAmount > 0" class="reward">悬赏{{ item.publishInfo.recourseAmount }}积分</div>
					<div class="textBox">
						<text class="good" v-if="item.publishInfo.publishStatus == 2">精</text>
						<text class="stick" v-if="item.publishInfo.publishStatus == 1">顶</text>
						<text class="ask" v-if="item.publishInfo.publishType == 1">问</text>
						<text v-if="item.publishInfo.publishSubject" class="text">{{ item.publishInfo.publishSubject }}</text>
						<text v-if="item.publishInfo.publishContent" class="text">{{ item.publishInfo.publishContent }}</text>
					</div>
					<div v-if="item.showImage" class="imgList" @click.stop>
						<image @click.stop="preview(val, item.imgList)" v-for="(val, k) in item.imgList" :key="k" :src="val"
							mode="aspectFill"></image>
					</div>
					<view class="btn-primary" v-if="item.imgList.length > 0" @click.stop="changeImageStatus(index)">
						{{ item.showImage ? '隐藏图片' : '查看图片' }}
					</view>
					<div class="foot">
						<div>
							<image src="/static/images/ic_comment.png"></image>
							<span>{{ item.publishInfo.commentsAmount || 0 }}</span>
						</div>
						<div>
							<image src="/static/images/ic_like.png"></image>
							<span>{{ item.publishInfo.collectQuantity || 0 }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		getMyAssistanceList
	} from '@/apis/request.js';
	export default {
		data() {
			return {
				finished: false,
				pageNo: 1,
				pageSize: 10,
				list: []
			};
		},
		methods: {
			to(url) {
				uni.navigateTo({
					url
				});
			},
			preview(cur, index) {
				this.$Imgpreview(cur, this.list[index].imgList);
			},
			async getlist() {
				if (!wx.getStorageSync('userInfo').id) {
					return;
				}
				if (!this.finished) {
					const data = await getMyAssistanceList({
						pageNo: this.pageNo++,
						pageSize: 10
					});
					if (data.records.length == 0) {
						this.finished = true;
					}
					this.list = this.list.concat(
						...data.records.map(item => {
							return {
								...item,
								showImage: false,
								imgList: item.publishInfo.imageUrl ? item.publishInfo.imageUrl.split(',') : []
							};
						})
					);
					uni.stopPullDownRefresh();
				}
			}
		},
		created() {
			Object.assign(this.$data, this.$options.data());
			this.getlist();
		},
		onReachBottom() {
			this.getlist();
		},
		onPullDownRefresh() {
			this.list = [];
			this.finished = false;
			this.pageNo = 1;
			this.getlist();
		}
	};
</script>

<style lang="scss" scoped>
	.view {
		width: 100%;
		background-color: #f1efef;

		.list {
			.item {
				padding: 30rpx;
				background-color: #ffffff;
				margin-bottom: 30rpx;

				.text {
					font-size: 28rpx;
					word-break: break-all;
				}

				.Box {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					image {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					div {
						p:nth-child(1) {
							color: #020202;
							font-size: 30rpx;
							margin-bottom: 10rpx;
						}

						p:nth-child(2) {
							color: #999999;
							font-size: 22rpx;
						}
					}
				}

				.wrap {
					background: #f2f2f2;
					padding: 30rpx;
					margin-top: 10rpx;

					.Box {
						position: relative;

						image {
							width: 60rpx;
							height: 60rpx;
						}

						div {
							p:nth-child(1) {
								color: #020202;
								font-size: 26rpx;
								margin-bottom: 10rpx;
							}

							p:nth-child(2) {
								color: #999999;
								font-size: 18rpx;
							}
						}

						.solution {
							position: absolute;
							right: 0;
							color: #ff290b;
							font-size: 26rpx;
							font-weight: bold;
							transform: rotate(45deg);
						}
					}

					.reward {
						margin: 5rpx 0;
						font-size: 28rpx;
						color: #e5ae54;
					}

					.textBox {
						margin-top: 10rpx;

						.ask {
							margin-right: 5rpx;
							padding: 0 5rpx;
							color: #f83f06;
							font-size: 24rpx;
							border: 1rpx solid #f83f06;
							background-color: #fff3f4;
							border-radius: 5rpx;
						}

						.stick {
							margin-right: 5rpx;
							padding: 0 5rpx;
							color: #1dda61;
							font-size: 24rpx;
							border: 1rpx solid #1dda61;
							background-color: #e6f9ed;
							border-radius: 5rpx;
						}

						.good {
							margin-right: 5rpx;
							padding: 0 5rpx;
							color: #07a0f8;
							font-size: 24rpx;
							border: 1rpx solid #07a0f8;
							background-color: #e7f4fb;
							border-radius: 5rpx;
						}

						.text {
							color: #666666;
							font-size: 26rpx;
						}
					}

					.imgList {
						image {
							width: 222rpx;
							height: 222rpx;
							border-radius: 10rpx;
							margin: 10rpx 10rpx 10rpx 0rpx;
						}
					}

					.btn-primary {
						height: 60rpx;
						width: 200rpx;
						margin: 0 auto;
						margin-top: 20rpx;
						line-height: 60rpx;
						text-align: center;
						background: #32C59A;
						color: #ffffff;
						font-size: 28rpx;
						border-radius: 100rpx;
					}

					.foot {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						margin-top: 20rpx;

						div:nth-child(1) {
							margin-right: 20rpx;
						}

						div {
							display: flex;
							align-items: center;

							image {
								width: 36rpx;
								height: 36rpx;
								margin-right: 10rpx;
							}

							span {
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}
	}
</style>